import React, { FC, useContext } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { ProductCardContext } from '@/pages/components/ProductCard/ProductCardContext';
export interface IProps extends ICompProps {}
Collection.defaultProps = {} as Partial<IProps>;
function Collection(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('Collection', className);
    const { isCollection, handleChangeCollection } = useContext(ProductCardContext);
    return (
        <RootView className={localClassName} style={style}>
            {/* <Text className="text">{isCollection ? '取消收藏' : ''}</Text> */}
            <Text onClick={handleChangeCollection} className="iconfont collection-icon " style={{ color: isCollection ?'#FF8828':'#CBCDD6' }}>
                &#xe63a;
            </Text>
        </RootView>
    );
}
export default React.memo(Collection as FC<IProps>);
const RootView = styled(View)`
    &.Collection {
        display: flex;
        align-items: center;
        .collection-icon {
            font-size: 40px;
            color: #cbcdd6;
            margin-left: 16px;
        }
        .collectioned {
            color: #ff8828;
        }
        .text {
            font-size: 24px;
            font-weight: 400;
            color: #cbcdd6;
        }
    }
`;
